<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/flexslider.css"/>
    <link rel="stylesheet" href="css/base.css"/>

    <style type="text/css">
        .ms-controller, [ms-controller] {
            display: none;
        }
    </style>
</head>
<body>

<!-- header 顶部 -->
<header>
    <a href="./"><img src="./images/logo.png" alt=""/>淘划算 - 未来商店</a>
    <span class="right">
        <form>
            <input type="text" class="headInput" placeholder="输入商品名称"/><input type="button" class="headBtn" value="搜索"/>
        </form>
    </span>
</header>

<!-- menu 菜单 -->
<menu id="category" ms-controller="category">
   <!-- <li class="active"><a href="#">电器</a></li>-->
    <li ms-repeat-el="ctdata" ><a ms-href="index_item.html?cat={{el.ID}}&catn={{el.MenuTxt}}" data-transition="slide">{{el.MenuTxt}}</a></li>
    <!--<li><a href="#">手机</a></li>
    <li><a href="#">电脑</a></li>
    <li><a href="#">服装</a></li>
    <li><a href="#">鞋帽</a></li>

    <li><a href="#">厨卫</a></li>
    <li><a href="#">日用品</a></li>
    <li><a href="#">护理化妆</a></li>
    <li><a href="#">营养保健</a></li>
    <li><a href="#">食品</a></li>-->
    <li><a href="#">本地商品</a></li>
</menu>

<!-- slider 轮播图片 -->
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="./images/s1.jpg" />
        </li>
        <li>
            <img src="./images/s2.jpg" />
        </li>
    </ul>
</div>


<!-- 商品列表 促销打折 -->
<div class="goodList">
    <!--<div class="title">
        <img src="./images/icon1.jpg" />促销打折 <a href="javascript:;" class="more">更多</a>
    </div>-->
    <ul>
        <!--<li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>
        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>-->
    </ul>
</div>

<p style="text-align:center">---往下滑更精彩---</p>



<!-- 新品上市 促销打折 -->
<!--<div class="goodList">
    <div class="title">
        <img src="./images/icon2.jpg" />新品上市 <a href="javascript:;" class="more">更多</a>
    </div>
    <ul>
        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>
    </ul>
</div>-->


<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/avalon.mobile.min.js"></script>
<script>

    var model1 = avalon.define({
        $id: "category",
        ctdata: []
    });

    $(document).ready(function () {

        //if (window.localStorage.getItem("username")) {
        //} else {
        //    window.location = "login.html";
        //}


        $(".flexslider").flexslider({
            slideshowSpeed: 4000, //展示时间间隔ms
            animationSpeed: 400, //滚动时间ms
            touch: true //是否支持触屏滑动
        });

        $.getJSON("/View/SpeList/DLLAjaxHandler.ashx?action=GetLeiBie", function (r) {
            model1.ctdata = r;
        })

        window.localStorage.removeItem("page");
        window.localStorage.setItem("page", 1);
        loadMore();
        $(window).scroll(function () {

            if ($(document).height() - $(this).scrollTop() - $(this).height() < 50) {
                loadMore();
            }

        })


    })

    function loadMore() {
        var page = parseInt(window.localStorage.getItem("page"));
        if (page > 0) {

            $.getJSON("/View/SpeList/DLLAjaxHandler.ashx?action=GetTJ&Page=" + page, function (r) {
                if (r) {
                    var imgli = "";
                    $(r).each(function (index, item) {
                        imgli += " <li class=\"goodItem\"><a href=\"" + item.ID + "\"><img src=\"" + item.ImgUrl1 + "\" /><p><span></span><b>￥" + item.Price2 + "</b><del>原价：￥" + item.Price1 + "</del></p></a></li>";
                    })
                    $(".goodList ul").append(imgli);

                    var nxt = page + 1;
                    window.localStorage.setItem("page", nxt);
                } else {
                    window.localStorage.setItem("page", 0);
                }
            })
        }
        
    }

</script>
</body>
</html>